<template>
	<view class="points-container">
        <scroll-view scroll-y="true" :style="{height: scrollHeight}" :refresher-enabled="false" @scrolltolower="onScrolltolower">
            <view class="points-info">
                <view class="info-left u-flex-1 u-m-r-10">
                    <view class="u-m-b-20">
                        我的消费
                    </view>
                    <view class="u-m-b-20 points-num u-line-1">
                        {{ points }}
                    </view>
                    <view class="u-m-b-20">
                        <!-- 代金券可以当钱花! -->
                    </view>
                </view>
            </view>
            <view class="points-list">
                <view class="points-title u-text-center">
                    消费数量明细
                </view>
                <view class="">
                    <u-empty text="您还没有消费记录哦~" mode="list" v-if="!pointsList.length && finished"></u-empty>
                    <view class="points-item u-flex" v-for="(point, index) in pointsList" :key="index" v-else>
                        <view class="u-flex-1">
                            <view class="u-m-b-15">
                                {{ point.remark }}
                            </view>
                            <view class="points-time">
                                {{ point.create_time | date('yyyy-mm-dd hh:MM:ss') }}
                            </view>
                        </view>
                        <view class="u-text-right">
                            <view class="">
                                数量：{{point.amount}}
                            </view>
                            <!-- <view class="">
                                等级：{{ point.grade_point ? (point.grade_point_type ? '+' + point.grade_point : '-' + point.grade_point ) : 0 }}
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
	</view>
</template>

<script>
    import * as API_Members from '@/api/members.js'
	export default {
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 10,
                    asset: 3
                },
                points: 0,      //代金券
                pointsList: [],  //代金券明细列表
                finished: false, //是否已加载完毕
                scrollHeight: '' //页面滚动高度
			}
		},
        onLoad() {
            this.scrollHeight = uni.getSystemInfoSync().windowHeight + 'px'
            this.getPoints()
            this.getPointsData()
        },
		methods: {
            // 获取消费代金券、等级代金券
            async getPoints() {
                let res = await API_Members.memberInfo()
                console.log(res)
                this.points = res.pick_amount
            },
            //获取代金券明细
            async getPointsData() {
                let {data} = await API_Members.getListPoint(this.params)
                console.log(data)
                if (data && data.length) this.pointsList.push(...data)
                else this.finished = true
                
                
                // API_Members.getPointsData(this.params).then(response => {
                //     const { data } = response
                //     if(data && data.length) {
                //         this.pointsList = this.pointsList.concat(data)
                //     } else {
                //         this.finished = true
                //     }
                // })
            },
            // 滚动加载更多数据
            onScrolltolower() {
                if(this.finished) return
                this.params.page_no += 1
                this.getPointsData()
            }
		}
	}
</script>

<style lang="scss" scoped>
    .points-container {
        .points-info {
            padding: 55rpx 40rpx;
            height: 400rpx;
            color: #FFFFFF;
            display: flex;
            background-image: url(../static/images/bg/bg3.png);
            background-size: 100% 100%;
            .points-num {
                font-size: 70rpx;
                font-weight: 600;
            }
            .info-left, .info-right {
                width: 300rpx;
            }
        }
        .points-list {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            margin: -90rpx 30rpx 90rpx 30rpx;
            min-height: 800rpx;
            /deep/ .u-empty {
                margin-top: 200rpx !important;
            }
            .points-title {
                height: 90rpx;
                line-height: 90rpx;
                color: #FD5B00;
                font-weight: 600;
            }
            .points-item {
                margin: 0 30rpx;
                padding: 30rpx 0;
                border-bottom: 2rpx solid #EEEEEE;
                &:last-child {
                    border-bottom: none;
                }
                .points-time {
                    font-size: 24rpx;
                    color: #878787;
                }
            }
        }
    }
</style>
